import 'package:flutter/material.dart';
import 'package:gw_github_flutter/common/route_name.dart';

class ImageViewRoute extends StatefulWidget {
  ImageViewRoute({Key? key}) : super(key: key);

  @override
  State<ImageViewRoute> createState() => _ImageViewRouteState();
}

class _ImageViewRouteState extends State<ImageViewRoute> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(RouteName.imageViewRoute),
      ),
      body: ListView(
        children: [
          _oneFadeInImage(),
          _twoFadeInImage(),
          _threeFadeInImage(),
          _otherFadeInImage(),
          const SizedBox(
            height: 20,
          )
        ],
      ),
    );
  }

  Widget _oneFadeInImage() {
    return Column(
      children: [
        const SizedBox(
          height: 20,
        ),
        const Text('网络占位图片FadeInImage'),
        Row(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
          FadeInImage.assetNetwork(
              placeholder: 'imgs/fengjing.png',
              image:
                  'https://avatars2.githubusercontent.com/u/20411648?s=460&v=4',
              fit: BoxFit.fill,
              height: 150,
              width: 150),
        ]),
      ],
    );
  }

  Widget _twoFadeInImage() {
    return Column(
      children: [
        const SizedBox(
          height: 20,
        ),
        const Text('two 圆形网络占位图片FadeInImage'),
        Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              ClipOval(
                  child: FadeInImage.assetNetwork(
                      placeholder: 'imgs/fengjing.png',
                      image:
                          'https://avatars2.githubusercontent.com/u/20411648?s=460&v=4',
                      fit: BoxFit.fill,
                      height: 150,
                      width: 150)),
              ClipRRect(
                /// 圆角
                borderRadius: BorderRadius.circular(10.0),
                child: FadeInImage.assetNetwork(
                    placeholder: 'imgs/fengjing.png',
                    image:
                        'https://avatars2.githubusercontent.com/u/20411648?s=460&v=4',
                    fit: BoxFit.fill,
                    height: 150,
                    width: 150),
              ),
            ]),
      ],
    );
  }

  Widget _threeFadeInImage() {
    return Column(
      children: [
        const SizedBox(
          height: 20,
        ),
        const Text('three TextDirection图片内部方向'),
        Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              Directionality(
                  textDirection: TextDirection.ltr,
                  child: FadeInImage.assetNetwork(
                      placeholder: 'imgs/fengjing.png',
                      image:
                          'https://avatars2.githubusercontent.com/u/20411648?s=460&v=4',
                      fit: BoxFit.fill,
                      matchTextDirection: true,
                      height: 150,
                      width: 150)),
              Directionality(
                  textDirection: TextDirection.rtl,
                  child: FadeInImage.assetNetwork(
                      placeholder: 'imgs/fengjing.png',
                      image:
                          'https://avatars2.githubusercontent.com/u/20411648?s=460&v=4',
                      matchTextDirection: true,
                      fit: BoxFit.fill,
                      height: 150,
                      width: 150))
            ]),
      ],
    );
  }

  Widget _otherFadeInImage() {
    return Column(
      children: [
        const SizedBox(
          height: 20,
        ),
        const Text('other'),
        Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              /// 加载本地资源gif图片
              Image.asset('imgs/loading.gif', height: 200, width: 200),
            ]),
        const SizedBox(
          height: 20,
        ),
        const Text('颜色混合图片'),
        const Divider(),
        Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              Image.asset('imgs/fengjing.png',
                  width: 100,

                  /// 混合的颜色，和colorBlendMode一起使用
                  color: Colors.red,

                  /// 颜色和图片混合模式，功能较强大，其它模式参见官方文档或源码
                  colorBlendMode: BlendMode.overlay),
              Image.network(
                  "https://avatars2.githubusercontent.com/u/20411648?s=460&v=4",
                  width: 100,
                  colorBlendMode: BlendMode.colorDodge,
                  color: Colors.blue)
            ]),
        // const Divider(),
        // const Text('centerSlice图片内部拉伸'),
        // const Divider(),
        // Image.asset('imgs/avatar-default.png',
        //     width: 250,
        //     height: 250,
        //     fit: BoxFit.contain,
        //     centerSlice:
        //         Rect.fromCircle(center: const Offset(20, 20), radius: 1)),
      ],
    );
  }
}
